<template>
<!--  <h2>分类</h2>-->
  <div class="wrapper" ref="aaa">
    <ul class="content">
    <li>分类列表1</li>
    <li>分类列表2</li>
    <li>分类列表3</li>
    <li>分类列表4</li>
    <li>分类列表5</li>
    <li>分类列表6</li>
    <li>分类列表7</li>
    <li>分类列表8</li>
    <li>分类列表9</li>
    <li>分类列表10</li>
    <li>分类列表11</li>
    <li>分类列表12</li>
    <li>分类列表13</li>
    <li>分类列表14</li>
    <li>分类列表15</li>
    <li>分类列表16</li>
    <li>分类列表17</li>
    <li>分类列表18</li>
    <li>分类列表19</li>
    <li>分类列表20</li>
    <li>分类列表21</li>
    <li>分类列表22</li>
    <li>分类列表23</li>
    <li>分类列表24</li>
    <li>分类列表25</li>
    <li>分类列表26</li>
    <li>分类列表27</li>
    <li>分类列表28</li>
    <li>分类列表29</li>
    <li>分类列表30</li>
    <li>分类列表31</li>
    <li>分类列表32</li>
    <li>分类列表33</li>
    <li>分类列表34</li>
    <li>分类列表35</li>
    <li>分类列表36</li>
    <li>分类列表37</li>
    <li>分类列表38</li>
    <li>分类列表39</li>
    <li>分类列表40</li>
    <li>分类列表41</li>
    <li>分类列表42</li>
    <li>分类列表43</li>
    <li>分类列表44</li>
    <li>分类列表45</li>
    <li>分类列表46</li>
    <li>分类列表47</li>
    <li>分类列表48</li>
    <li>分类列表49</li>
    <li>分类列表50</li>
  </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  // const BScroll = new BScroll(document.querySelector('.wrapper'),{
  //   // 实时监听
  //   probeType:3,
  //   // 点击事件
  //   click:true,
  //   // 上拉刷新
  //   pullUpLoad:true
  // })
  // // 监听scroll事件，在回调函数拿到position
  // BScroll.on('scroll',(position) =>{
  //   console.log(position);
  // })
  //
  // // 上拉加载更多做完之后要调用finishPullUp才能二次加载
  // BScroll.on('pullingUp',() =>{
  //   console.log('上拉加载更多');
  //   // 发送网络请求，请求更多页的数据
  //
  //   // 等数据请求完成，并且将新的数据展示出来后
  //   setTimeout(() =>{
  //     BScroll.finishPullUp()
  //   },2000)
  // })



  export default {
    name: "Category",
    data(){
      return{
        scroll: null
      }
    },
    // 组件创建完后调用
    created() {

    },
    mounted() {
      this.scroll = new BScroll(document.querySelector('.wrapper'),{
        // 实时监听
        probeType:3,
        // 上拉刷新
        pullUpLoad:true
      })
      // 监听scroll事件，在回调函数拿到position
      this.scroll.on('scroll',(position) =>{
        // console.log(position);
      })
      // // 上拉加载更多做完之后要调用finishPullUp才能二次加载
      this.scroll.on('pullingUp',() => {
        console.log('上拉加载更多');
        // 发送网络请求，请求更多页的数据
      })
    },


  }
</script>

<style scoped>
  .wrapper{
    height: 150px;
    background: #ff5777;
    /*隐藏超出部分并且y方向可以滚动*/
    overflow-y: scroll;
  }
</style>
